<template>
	<view>
		<!-- 自定义导航栏 -->
		<new-nav-bar :tabBars="tabBars" :tabIndex="tabIndex" @changetap="changetap">

		</new-nav-bar>


		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabIndex" @change="tabChange">
				<!-- 关注 -->
				<swiper-item>
					<!-- @scrolltolower这个是触底事件 -->
					<scroll-view scroll-y class="list" @scrolltolower="loadmore()">
						<!-- 列表 -->

						<block v-for="(item,index) in guangshu.list" :key="index">
							<common-list :item="item" :index="index"></common-list>

						</block>
						<!-- 上拉加载 -->
						<load-more :loadtext="guangshu.loadtext"></load-more>
					</scroll-view>
				</swiper-item>

				<!-- 话题 -->
				<swiper-item>
					<!-- @scrolltolower这个是触底事件 -->
					<scroll-view scroll-y class="list">
						<!-- 搜索款 -->
						<view class="seach-inut">
							<input class="uni-input" placeholder="搜索内容.." placeholder-class="icon iconfont icon-bi top-search" />

						</view>


						<!-- 轮播图 -->
						<swiper class="top-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
							<block v-for="(item,index) in topic.swiper" :key="index">
							<swiper-item>
								<image :src="item.src" mode="widthFix" lazy-load=""></image>
							</swiper-item>	
								
							</block>
							
							
							
						</swiper>
						<!-- 热门分类 -->
						<top-nav :nav="topic.nav"></top-nav>
						<!-- 最近更新 -->
						<view class="top-new-list">
							<!-- 标题 -->
							<view>最近更新</view>
								<!-- 列表 -->
							<block v-for="(item,index) in topic.list" :key="index">
								<top-list :item="item" :index="index"></top-list>
								
							</block>
							
						
							
							
						</view>

					</scroll-view>
				</swiper-item>

			</swiper>
		</view>

	</view>
</template>

<script>
	import topList from "../../components/news/top-list.vue";
	import topNav from "../../components/news/top-nav.vue";
	import loadMore from "../../components/common/load-more.vue";
	import newNavBar from "../../components/news/news-nav-bar.vue";
	import commonList from "../../components/common/common-list.vue";

	export default {
		components: {

			commonList,
			newNavBar,
			loadMore,
			topNav,
			topList
		},
		data() {
			return {
				swiperheight: 500,
				tabIndex: 0,

				tabBars: [{
						name: "关注",
						id: "guanzhu"
					},
					{
						name: "话题",
						id: "huati"
					}
				],

				guangshu: {
					loadtext: "上拉加载更多",
					list: [

						{

							userpic: "../../static/srcc/touxiang.jpg",
							username: "Vincent",
							sex: 0, //0代表是男生，1代表女生
							age: 25,
							isguangzhu: false,
							title: "打代码666",
							titlepic: "../../static/srcc/c2.jpg",
							video: false,
							share: false,
							path: "深圳 龙岗",
							sharenum: 50,
							commentnum: 40,
							goodnum: 80

						},
						//视频的例子
						{
							userpic: "../../static/srcc/touxiang.jpg",
							username: "Vincent",
							sex: 1, //0代表是男生，1代表女生
							age: 25,
							isguangzhu: false,
							title: "打代码",
							titlepic: "../../static/srcc/c2.jpg",
							video: {
								looknum: "300万播放",
								long: "1.21"
							},
							share: false,
							path: "深圳 龙岗",
							sharenum: 50,
							commentnum: 40,
							goodnum: 80

						},

						//分享的例子
						{
							userpic: "../../static/srcc/touxiang.jpg",
							username: "Vincent",
							sex: 0, //0代表是男生，1代表女生
							age: 25,
							isguangzhu: false,
							title: "打代码",
							titlepic: "",
							video: false,
							share: {
								title: "哈哈哈打代码",
								titlepic: "../../static/srcc/c2.jpg"
							},
							path: "深圳 龙岗",
							sharenum: 50,
							commentnum: 40,
							goodnum: 80

						}
					]

				},
				topic:{
					
					swiper:[
						{src:"../../static/srcc/2.jpg"},
						{src:"../../static/srcc/2.jpg"},
						{src:"../../static/srcc/2.jpg"}
						
					],
					nav:[
						{name:"最新",id:"zuixin"},
						{name:"游戏",id:"zuixin"},
						{name:"打卡",id:"zuixin"},
						{name:"情感",id:"zuixin"},
						{name:"娱乐",id:"zuixin"},
						{name:"故事",id:"zuixin"}
					],
					list:[
						{
							titlepic:"../../static/srcc/3.jpg",
							title:"打代码好吗",
							desc:"打代码很好，天天熬夜打怪兽",
							totalnum:50,
							todaynum:10
						},
						{
							titlepic:"../../static/srcc/3.jpg",
							title:"打代码好吗",
							desc:"打代码很好，天天熬夜打怪兽",
							totalnum:50,
							todaynum:10
						},
						{
							titlepic:"../../static/srcc/3.jpg",
							title:"打代码好吗",
							desc:"打代码很好，天天熬夜打怪兽",
							totalnum:50,
							todaynum:10
						},
						{
							titlepic:"../../static/srcc/1.jpg",
							title:"打代码好吗",
							desc:"打代码很好，天天熬夜打怪兽",
							totalnum:50,
							todaynum:10
						}
						
					]
				}

			}
		},

		methods: {
			changetap(index) {
				this.tabIndex = index;

			},
			// 点击事件
			tabtap(index) {
				console.log(index);
				this.tabIndex = index;
			},
			//滑动事件
			tabChange(e) {
				console.log(JSON.stringify(e.detail))
				this.tabIndex = e.detail.current;
				console.log(e.detail.current)
			},

			// 上拉加载做更多
			loadmore() {

				//如果目前全等于加载更多我们就给他这个事件，不然就return
				if (this.guangshu.loadtext != "上拉加载更多") {
					return;
				}
				//修改状态
				this.guangshu.loadtext = "加载中...";
				//获取数据
				setTimeout(() => {
					//获取完成
					let obj = {

						userpic: "../../static/srcc/touxiang.jpg",
						username: "Vincent",
						sex: 0, //0代表是男生，1代表女生
						age: 25,
						isguangzhu: false,
						title: "打代码666",
						titlepic: "../../static/srcc/c2.jpg",
						video: false,
						share: false,
						path: "深圳 龙岗",
						sharenum: 50,
						commentnum: 40,
						goodnum: 80

					};


					this.guangshu.list.push(obj);
					this.guangshu.loadtext = "上拉加载更多"
				}, 1000);


				//this.guangshu.loadtext="没有更多数据了";



			}

		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100);
					console.log(res.screenHeight);
					console.log(height);
					this.swiperheight = height;
				}
			});
		}

	}
</script>

<style>
	.seach-inut {
		/* border: 1upx solid; */
		padding: 20upx;
	}

	.seach-inut>input {
		/* border: 1upx solid; */
		background: #F1F1F1;
		border-radius: 10upx;
	}

	.top-search {

		display: flex;
		justify-content: center;
		font-size: 30upx;
	}
	.top-swiper{
		padding: 0px 20px 20px ;
	}
	.top-swiper image{
		width: 100%;
		border-radius: 10upx;
	}
	
</style>
